<template>
  <view class="container">
    <!-- 顶部组件 -->
    <u-navbar
      id="nav-bar"
      :is-back="true"
      :background="{ background: '#fff' }"
      :border-bottom="false"
      title="绑定结算卡"
    ></u-navbar>

    <view class="form-box">
      <view class="form-box-in">
        <u-form :model="form" ref="uForm" :label-width="240">
          <u-form-item label="姓名" :border-bottom="false">
            <u-input
              v-model="form.name"
              placeholder="请输入姓名"
              :disabled="true"
            />
          </u-form-item>

          <u-form-item label="身份证号码" :border-bottom="false">
            <u-input
              v-model="form.idCard"
              placeholder="请输入身份证号码"
              :border-bottom="false"
              type="text"
              :disabled="true"
            />
          </u-form-item>

          <u-form-item label="分润档位" :border-bottom="false">
            <u-input
              v-model="form.gear"
              placeholder="请输入分润档位"
              :border-bottom="false"
              :disabled="true"
            />
          </u-form-item>

          <u-form-item label="登录手机号" :border-bottom="false">
            <u-input
              v-model="form.phone"
              placeholder="请输入登录手机号"
              :border-bottom="false"
              :disabled="true"
            />
          </u-form-item>
        </u-form>
      </view>
    </view>

    <view class="form-box">
      <view class="form-box-in">
        <u-form :model="form" ref="uForm" :label-width="240">
          <u-form-item label="结算卡照片">
            <u-upload
              ref="back"
             class='float-right'
              :action="action"
              :max-count="1"
              :auto-upload="true"
              :custom-btn="true"
              width="160"
              height="110"
              @on-uploaded="onUploadedPhoto"
              @on-remove="onRemovePhoto"
            >
              <view
                slot="addBtn"
                class="slot-btn"
                hover-class="slot-btn__hover"
                hover-stay-time="150"
              >
                <image
                  class="customBtn"
                  :src="`${
                    formModel.photo
                      ? 'https://file.diqihengrun.com/image' + formModel.photo
                      : '/static/images/icon-jskzm.png'
                  } `"
                ></image>
              </view>
            </u-upload>
          </u-form-item>
          <u-form-item label="卡号" :border-bottom="false">
            <u-input
              v-model="form.cardNo"
              placeholder="请输入卡号"
              :disabled="true"
            />
          </u-form-item>

          <view class="bindBankCard" @click="handleShow">
            <view class="bindBankCard-in" @click="handleShow"></view>
            <u-form-item
              label="发卡行"
              :border-bottom="false"
              right-icon="arrow-right"
            >
              <u-input
                v-model="form.bankName"
                placeholder="请选择发卡行"
                :disabled="true"
                :border-bottom="false"
              />
            </u-form-item>
          </view>

          <u-form-item label="开户地点" :border-bottom="false">
            <u-input
              v-model="form.address"
              placeholder="请填写开户地点"
              type="number"
            />
          </u-form-item>
        </u-form>
      </view>
    </view>

    <view class="agreement">
      <view class="agreement-in">
        <u-checkbox
          v-model="check"
          size="30rpx"
          active-color="#C5A27F"
          label-disabled
          @change="checkboxChange"
        >
          <view class="agreement-text">
            我已阅读并同意<text>《绑卡协议》</text>
          </view>
        </u-checkbox>
      </view>
    </view>

    <view class="tip">
      温馨提示:1.所有照片需真人、实地拍摄，任何翻拍、乱拍的行为，一经发现，永久拉黑，不得入网
      2.为进行实名认证，我们须手机您的身份证号、姓名、性别民族、出生日期、住址、身份证有效期、签发机关
    </view>

    <view class="bottom">
      <view class="sureBtn" @click="submit">绑定结算卡</view>
    </view>

    <!-- 选择银行卡 -->
    <u-popup
      v-model="showBankList"
      mode="bottom"
      length="60%"
      :closeable="true"
      border-radius="20"
    >
      <view class="bankList">
        <view class="title">选择所属银行</view>
        <view
          v-for="item in bankList"
          :key="item.id"
          class="item"
          @click="handleChooseBank(item)"
        >
          <view class="left">
            <image :src="item.logo" mode="aspectFill"></image>
            <text class="name">{{ item.name }}</text>
          </view>
          <u-icon name="arrow-right" color="#CCCCCC"></u-icon>
        </view>
      </view>
    </u-popup>

    <!-- 选择所属地区 -->
    <u-picker
      ref="uPicker"
      mode="multiSelector"
      v-model="showCityList"
      :mask-close-able="false"
      :default-selector="defaultSelector"
      :range="range"
      range-key="name"
      @confirm="confirm"
      @columnchange="columnChange"
    ></u-picker>
  </view>
</template>
<script>
import service from '@/common/service.js';
import { throttle } from '@/common/utils.js';

export default {
  data() {
    return {
      form: {
        name: '',
        idCard: '',
        gear: '',
        phone: '',
        photo: '',
        cardNo: '',
        bankName: '',
        address: '',
      },
      check: false,
      action: '',
      showBankList: false,
      bankList: [],
      isEdit: false,
      editId: '',
      showCityList: false,
      defaultSelector: [0, 0],
      range: [[], []],
      provinceData: [],
      cityData: [],
      province: '',
      city: '',
    };
  },
  onLoad(option) {
    if (option.id) {
      this.getMyBankCard(option.id);
      this.isEdit = true;
      this.editId = option.id;
    }
    const userInfo = uni.getStorageSync('userInfo');
    if (userInfo) {
      this.form.name = userInfo.realName;
      this.form.idCard = userInfo.idCard;
    }
    this.getProvinceData();
    this.getAllBankCard();
  },
  methods: {
    checkboxChange(value) {},
    navigateTo(url) {
      uni.navigateTo({
        url: url,
      });
    },
    onUploadedPhoto(lists, name) {
      let filePath = lists[0].response.data[0].filePath;
      this.formModel.photo = filePath;
    },
    onRemovePhoto(index, lists, name) {
      this.formModel.photo = '';
    },
    getProvinceData() {
      const that = this;
      service.getProvinceData(
        {},
        function (res) {
          if (res && res.data) {
            that.provinceData = res.data;
            that.range[0] = res.data;
            that.getCityData(res.data[0].id);
          }
        },
        function (res) {}
      );
    },
    getCityData(id) {
      const that = this;
      const params = {
        id: id,
      };
      service.getCityData(
        params,
        function (res) {
          if (res && res.data) {
            that.cityData = res.data;
            that.range[1] = res.data;
          }
        },
        function (res) {}
      );
    },
    getMyBankCard(id) {
      const that = this;
      const param = {
        id: id,
      };
      service.getMyBankCard(
        param,
        function (res) {
          if (res && res.data) {
            const {
              name,
              idCard,
              bankName,
              bankCode,
              phone,
              cardNo,
              bankId,
              isDefault,
            } = res.data;
            that.form.name = name;
            that.form.idCard = idCard;
            that.form.bankName = bankName;
            that.form.bankCode = bankCode;
            that.form.phone = phone;
            that.form.cardNo = cardNo;
            that.form.bankId = bankId;
            that.form.isDefault = isDefault;
          }
        },
        function (res) {}
      );
    },
    getAllBankCard() {
      const that = this;
      const param = {};
      service.getAllBankCard(
        param,
        function (res) {
          if (res && res.data) {
            that.bankList = res.data;
          }
        },
        function (res) {}
      );
    },
    showCityPicker() {
      this.showCityList = true;
    },
    confirm(e) {
      const provinceIndex = e[0];
      const cityIndex = e[1];
      this.form.provinceId = this.provinceData[provinceIndex].id;
      this.province = this.provinceData[provinceIndex].name;
      this.form.cityId = this.cityData[cityIndex].id;
      this.city = this.cityData[cityIndex].name;
      this.form.area = `${this.province} ${this.city}`;
    },
    handleShow() {
      this.showBankList = true;
    },
    handleChooseBank(data) {
      this.showBankList = false;
      this.form.bankCode = data.code;
      this.form.bankName = data.name;
      this.form.bankId = data.id;
    },
    columnChange(e) {
      let column = e.column,
        index = e.index;
      if (column === 0) {
        const provinceId = this.provinceData[index].id;
        this.getCityData(provinceId);
      }
    },
    submit: throttle(function () {
      const that = this;

      if (!that.form.name) {
        util.showToast('请输入持卡人姓名');
        return;
      }

      // if (!that.form.idCard) {
      //   util.showToast('请输入持卡人身份证号码');
      //   return;
      // }

      if (!that.form.bankId) {
        util.showToast('请选择绑定银行');
        return;
      }

      if (!that.form.cardNo) {
        util.showToast('请输入银行卡号码');
        return;
      }

      const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
      if (
        !that.form.phone ||
        that.form.phone.length > 11 ||
        !reg.test(that.form.phone)
      ) {
        util.showToast('手机号输入有误');
        return;
      }

      if (!that.form.code) {
        util.showToast('请输入验证码');
        return;
      }

      util.showLoading('处理中');
      if (that.isEdit) {
        const param = {
          type: 0,
          bankId: that.form.bankId,
          name: that.form.name,
          cityId: that.form.cityId,
          phone: that.form.phone,
          idCard: that.form.idCard,
          cardNo: that.form.cardNo,
          isDefault: that.form.isDefault,
          smsCode: that.form.code,
          id: that.editId,
        };
        service.editCard(
          param,
          function (res) {
            util.hideLoading();
            if (res && res.data) {
              util.showToast('修改成功,正在跳转');
              setTimeout(function () {
                uni.navigateTo({
                  url: '/pages/bankCard/index',
                });
              }, 2000);
            } else {
              util.showToast(res.message);
            }
          },
          function (res) {
            util.hideLoading();
          }
        );
      } else {
        const param = {
          type: 0,
          bankId: that.form.bankId,
          name: that.form.name,
          cityId: that.form.cityId,
          phone: that.form.phone,
          idCard: that.form.idCard,
          cardNo: that.form.cardNo,
          isDefault: that.form.isDefault,
          smsCode: that.form.code,
        };
        service.addCard(
          param,
          function (res) {
            util.hideLoading();
            if (res && res.data) {
              util.showToast('绑定成功,正在跳转');
              setTimeout(function () {
                uni.navigateTo({
                  url: '/pages/bankCard/index',
                });
              }, 2000);
            } else {
              util.showToast(res.message);
            }
          },
          function (res) {
            util.hideLoading();
          }
        );
      }
    }, 1000),
  },
};
</script>

<style lang="scss">
page {
  background-color: #f7f7f7;
}

.container {
  width: 100%;
  min-height: 100vh;
  padding: 0;
  text-align: center;
  background-color: #f7f7f7;
}

.form-box {
  width: 100%;
  padding: 30rpx;

  .form-box-in {
    padding: 0 26rpx;
    background: #ffffff;
    border-radius: 20rpx;
  }
}

.tip {
  margin-top: 30rpx;
  width: 100%;
  padding: 0 30rpx;
  font-size: 26rpx;
  font-weight: 400;
  text-align: left;
  color: #999999;
  line-height: 1.5;
  text {
    color: #cc853d;
  }
}

.bottom {
  position: fixed;
  bottom: 60rpx;
  left: 0;
  width: 100%;
  padding: 0 30rpx;

  .sureBtn {
    width: 100%;
    height: 88rpx;
    line-height: 88rpx;
    font-size: 28rpx;
    font-weight: normal;
    color: #fff;
    text-align: center;
    background: linear-gradient(90deg, #332108, #201403);
    border-radius: 20rpx;
  }
}

.bankList {
  width: 100%;
  padding: 20rpx 30rpx 60rpx;

  .title {
    margin-bottom: 20rpx;
    font-size: 36rpx;
    font-weight: bold;
    color: #222222;
  }

  .item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx 0;

    .left {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;

      image {
        width: 62rpx;
        height: 62rpx;
        background: #ffffff;
        border: 1px solid #cccccc;
        border-radius: 50%;
      }

      .name {
        margin-left: 20rpx;
        font-size: 26rpx;
        font-weight: bold;
        color: #222222;
      }
    }
  }
}

.bindBankCard {
  position: relative;
  .bindBankCard-in {
    position: absolute;
    top: 0%;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    z-index: 999;
  }
}

.slot-btn {
  width: 160rpx;
  height: 110rpx;
  background: #f7f7f7;
  border-radius: 10rpx;
  .customBtn {
    width: 100%;
    height: 100%;
  }
}

.agreement {
  margin-top: 0;
  width: 100%;
  padding: 0 30rpx;
  z-index: 99;
  .agreement-in {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    text-align: left;
  }
  .agreement-text {
    color: #999393;
    font-size: 24rpx;
    font-weight: 500;
    line-height: 1;
    text {
      color: #b7926e;
    }
  }
}

.float-right {
  float: right;
}
</style>
